<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <!-- <style>
        div {
            font-size: 50px;
            color: blue;
        }
    </style> -->
    <!-- <link rel="stylesheet" href="style.css"> -->

</head>
<body>
    <!-- <div>hello</div>
    <div>hello</div> -->

    <!-- <div class="one">
        <div class="two">这个元素要居中</div>
    </div> -->

    <div class="one">
        <div class="two">1</div>
        <div class="two">2</div>
        <div class="two">3</div>
        <div class="two">4</div>
        <div class="two">5</div>

    </div>

    <style>
        .one {
            width: 1000px;
            height: 300px;
            background-color: gray;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .two {
            width: 150px;
            height: 100px;
            background-color: green;
        }


        /* * 称为 通配符 选择器，能够选中所有元素 */
        * {
            /* 此时边框不会撑大元素了 */
            box-sizing: border-box;
        }
        /* .two {
            width: 500px;
            height: 300px;
            background-color: gray;

            margin-left: auto;
            margin-right: auto;
        } */
        div {
            /* width: 500px;
            height: 300px;
            background-color: gray;

            margin-top: 50px; */

            /* border: red 20px solid;
            /* 边框还可以分开设置 */
            /* border-left: red 20px solid;
            border-right: green 20px dotted;
            border-top: blue 20px dashed;
            border-bottom: orange 20px solid; */
            /* 给四个方向都设置 30px 内边距 */
            /* padding: 30px; */
            /* 也可以给四个方向分别设置内边距 */
            /* padding-left: 20px;
            padding-top: 50px; */

            /* 给上下设置 30px ,左右设置 20px */
            /* padding: 30px 20px; */
            /* 给四个方向分别设置。上右下左 顺时针顺序设置的 */
            /* padding: 10px 20px 30px 40px; */

        }
    </style>


    <!-- <div>div1</div>
    <div>div2</div> -->

    <!-- <div class="four">这是一个圆角矩形</div>

    <style>
        .four {
            width: 500px;
            height: 300px;
            background-color: gray;
            border-radius: 50px;

        }
    </style> -->

    <!-- <div class="one">hello</div>
    <div class="two">hello2<br>hello2<br>hello2</div>
    <div class="three">hello3</div>

    <style>
        /* 背景相关 */
        .three {
            font-size: 100px;
            width: 1000px;
            height: 800px;

            background-color: red;
            background-image: url(lamb.png);
            /* background-repeat 禁止平铺 */
            background-repeat: no-repeat;
            /* background-position 设置背景图片的位置 */
            background-position: center center;
            /* background-size 设置背景大小 */
            background-size: 1000px 800px;
        }
        /* 文本相关 */
        .two {
            font-size: 100px;
            /* 文本颜色 */
            color:#ff0000;
            /* 文本对齐，左对齐(left)，右对齐(right)，居中对齐(center) */
            text-align: center;
            /* 文本装饰，加个下划线  none，可以把有下划线的给去掉（典型的就是 a 标签）*/
            text-decoration: underline;
            /* 文本缩进，首行缩进多大空间 */
            text-indent: 200px;
            /* 设置行高（行间距） */
            line-height: 200px;
        }
        /* 字体相关 */
        .one {
            /* 字体家族*/
            font-family: '宋体';
            /* 字体大小 */
            font-size: 100px;
            /* 字体粗细，100-900 的数值表示，数字越大，就越粗 */
            font-weight: 900;
            /* 设置文字切斜 */
            font-style: italic;

        }
    </style> -->

    <!-- <div class="one">
        <h3>hello</h3>
        <h2>hello</h2>
    </div>
    <div id="two">
        <h3>world</h3>
    </div>
    <style>
        .one h3 {
            color: red;
        }
        #two h3 {
            color: green;
        }
    </style> -->


    <!-- <div>111</div>
    <div class="one">222</div>
    <div>333</div>
    <div class="two">444</div>
    <div>11111111111111111111111111<span class="three">2222</span>11111111111111111</div>
    <div id="mydiv">555555555</div>
    <h1 class="three">555</h1>
    <style>
        /*使用 # 开头的，说明是一个 id 选择器 */
        #mydiv {
            color: black;
        }

        /* 使用 . 开头的，说明是一个 CSS 类*/
        .one {
            color: red;
        }
        .two {
            color: blue;
        }
        .three {
            color: yellow;
        }
        div {
            color: orange;
            font-size: 100px;
        }
    </style> -->

    <!-- <div style="color: green; font-size: 200px">hello</div> -->
</body>
</html>